<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>多分辨率病灶自动标注</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='layui/css/layui.css') }}">
    <style>
        .layui-panel {
            white-space: nowrap;
            padding: 50px 30px;
            position: fixed;
        {#使用transform会导致内部字体变模糊#} right: calc(50% - 352px);
            bottom: calc(50% - 155px)
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black" style="background-color: #23262e!important;">
                {#                <img src="{{ url_for('static',filename='img/logo.png') }}" alt="" style="width: auto;height: 95%"/>#}
            </div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item layui-hide-xs"><a href="/user/home">首页</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="/patient/patient_page">查看病人</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="/image/solo_mark">单分辨率病灶自动标注</a></li>
                <li class="layui-nav-item layui-hide-xs layui-this"><a
                        href="javascript:void(0)">多分辨率病灶自动标注</a></li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:void(0)">{{ user.name }}</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="/user/logout">登出</a></li>
            </ul>
        </div>

        <div class="layui-body">
            <div class="layui-panel">
                <form lay-filter="image_form" class="layui-form" action="javascript:void(0)">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">选择病人</label>
                            <div class="layui-input-inline">
                                <select lay-filter="patient_id" id="patient_id" name="patient_id" lay-verify="required"
                                        lay-search="">
                                    <option value="">直接选择或搜索选择</option>
                                    {% for patient in patient_list %}
                                        <option value="{{ patient.id }}">{{ patient.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" style="text-align: left">
                        <div class="layui-inline" style="margin-left: 35px">
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-radius upload_image_btn"
                                    lay-data="{status: 'l'}">
                                上传低分辨率图片
                            </button>
                        </div>
                        <div class="layui-inline" style="margin-left: 10px">

                            <div class="layui-upload">
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" style="width: 92px;height: 92px" id="preview_image_l">
                                </div>
                            </div>
                        </div>
                        <div class="layui-inline" style="margin-left: 40px">
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-radius upload_image_btn"
                                    lay-data="{status: 'h'}">
                                上传高分辨率图片
                            </button>
                        </div>
                        <div class="layui-inline" style="margin-left: 10px">

                            <div class="layui-upload">
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" style="width: 92px;height: 92px" id="preview_image_h">
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="layui-form-item" style="text-align: center">
                        <button id="btn_start" type="button" class="layui-btn">
                            开始标注
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="{{ url_for('static',filename='layui/layui.js') }}"></script>
<script>
    layui.use(['upload', 'element', 'layer', 'form'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , form = layui.form
            , element = layui.element
            , layer = layui.layer;
        //常规使用 - 普通图片上传
        let m_index;
        let files = [];
        {#上传模块，layui不能实现多图片同时上传，所以基本只使用了样式#}
        upload.render({
            elem: '.upload_image_btn'
            , accept: 'images'
            , acceptMime: 'image/jpg, image/png'
            , auto: false
            , choose: function (obj) {
                let status = this.status
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    if (status === 'l') {
                        files[0] = file
                        $('#preview_image_l').attr('src', result); //图片链接（base64）
                    } else {
                        files[1] = file
                        $('#preview_image_h').attr('src', result); //图片链接（base64）
                    }
                });
            }
        });
        {#执行上传#}
        $('#btn_start').click(function () {
            let patient_id = $('#patient_id option:checked').val()
            let formData = new FormData()
            formData.append('patient_id', patient_id)
            formData.append('model_kind', 0)
            formData.append('pre_img_l', files[0])
            formData.append('pre_img_h', files[1])
            {#console.log(formData)#}
            {#console.log(files.length)#}
            $.ajax({
                url: '/image/multi_transfer',
                type: 'POST',
                data: formData,
                dataType: "json",
                cache: false,
                processData: false,
                contentType: false,
                beforeSend: function () {
                    if (!form.validate("#patient_id")) {
                        return false;
                    }
                    if (!files.length || files.length !== 2) {
                        layer.alert('请先上传图片！')
                        return false;
                    }
                    m_index = layer.msg('上传中', {icon: 16, time: 0});
                },
                success: function (res) {
                    //如果上传失败
                    if (!res.success) {
                        return layer.alert(res.msg);
                    }
                    //上传成功的一些操作
                    //……
                    let image_id = res.id
                    {#成功后打开标注图片页，关闭时刷新页面以刷新表单#}
                    layer.open({
                        type: 2,
                        area: ['95%', '95%'],
                        content: [`/image/show_result?id=${image_id}`, 'no'],
                        end: function () {
                            location.reload()
                        }
                    })
                },
                error: function () {
                    layer.alert('上传失败，请重试')
                },
                complete: function () {
                    layer.close(m_index)
                }
            });
        })
    })
</script>
</body>
</html>